<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
				div {
				height: 200px;
				margin-bottom: 10px;
				background-color: #a43035;
				display: none;
				}
		</style>
		<script type="text/javascript">
			//等待页面加载完后才会执行.
			window.onload = function(){
				//不爽的地方:
				//1,代码比较麻烦需要遍历,可能还需要嵌套;/
				//2,找对象麻烦,方法少,还长;
				//3,会有兼容性问题;
				//4,如果想要实现简单的动画效果animate
				//5,js注册时间,会被覆盖,addEventListener
				
				var btn1 = document.getElementById("btn1");
				var btn2 = document.getElementById("btn2");
				var divs = document.getElementsByTagName("div");
				
				btn1.onclick = function() {
					for(var i = 0; i<divs.length;i++){
						divs[i].style.display = "block";
					}
				};
				btn2.onclick = function(){
					for(var i = 0;i<divs.length;i++){
						divs[i].innerText = "我是内容";
					}
				};
			};
		</script>
	</head>
	<body>
			<input type="button" value="展示" id = "btn1">
			<input type="button" id="btn2" value="设置内容" />
			<div></div>
			<div></div>
			<div></div>			
	</body>
</html>